<!-- 场地详情 -->
<script setup>
	import {
		reactive,
		ref,
		nextTick
	} from 'vue'
	import {
		onLoad,
		onShow,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		orderEvaluationApi,
		placeOrdApi,
		qryEvalApi,
		getProdApi
	} from '@/api/venue.js'
	import DateTabs from '@/uni_modules/hope-11-date-tabs-v3/components/hope-11-date-tabs-v3/hope-11-date-tabs-v3.vue'
	import index from '../../uni_modules/uview-plus'

	// 全局页面数据
	const data = reactive({
		barHeight: 0,
		navHeight: 0,
		swiperCurrent: 0,
		value1: {
			d: month,
			dd: timestamp2,
			w: weekDay,
		},
		timeCurrent: undefined,
		timelist: [{
				time: '01:00',
				disabled: ''
			},
			{
				time: '02:00',
				disabled: ''
			}, {
				time: '03:00',
				disabled: ''
			}, {
				time: '04:00',
				disabled: ''
			}, {
				time: '05:00',
				disabled: ''
			}, {
				time: '06:00',
				disabled: ''
			}, {
				time: '07:00',
				disabled: ''
			}, {
				time: '08:00',
				disabled: ''
			},
			{
				time: '09:00',
				disabled: ''
			},
			{
				time: '10:00',
				disabled: ''
			},
			{
				time: '11:00',
				disabled: ''
			},
			{
				time: '12:00',
				disabled: ''
			},
			{
				time: '13:00',
				disabled: ''
			},
			{
				time: '14:00',
				disabled: ''
			},
			{
				time: '15:00',
				disabled: ''
			},
			{
				time: '16:00',
				disabled: ''
			},
			{
				time: '17:00',
				disabled: ''
			},
			{
				time: '18:00',
				disabled: ''
			},
			{
				time: '19:00',
				disabled: ''
			},
			{
				time: '20:00',
				disabled: ''
			},
			{
				time: '21:00',
				disabled: ''
			},
			{
				time: '22:00',
				disabled: ''
			},
			{
				time: '23:00',
				disabled: ''
			},
			{
				time: '24:00',
				disabled: ''
			}
		],
		rateNum: 4
	})


	const year = ref()
	const day = ref()
	const date = new Date();
	onShow(() => {



	})

	// .toLocaleDateString();
	// 选中日期
	const onDateTabsChange = (e) => {
		console.log(e)
		data.value1 = e



		console.log(e.dd, 'e.dd加载');
		// 时间置灰
		timeSettingGray(e.dd)

	}



	// // 已经预约的时间置灰
	// const alreadyBooked = () => {

	// }
	let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1

	const venueDetails = ref({
		merName: '',
		prodDetailPic: [],
	})
	// 场地详情
	const dateList = ref([])
	const shijian = ref([])
	let timestamp2 =
		`${date.getFullYear()}-${month}-${date.getDate()}`
	let weekDay = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"][date.getDay()];
	const getProd = async () => {

		const {
			data
		} = await getProdApi({
			prodId: itemValue.value.prodId,
		})
		console.log('data: ====ces===', data);
		data.prodDetailPic = data.prodDetailPic.split(",")
		data.reservationDateList.forEach((item) => {
			dateList.value.push({
				date: item.slice(0, 10),
				time: item.slice(-8, -3),
			})
			console.log('ceshi===')
		})


		// // 已经预约的时间置灰
		// alreadyBooked()
		// 时间置灰
		console.log(timestamp2, 'timestamp2加载');
		timeSettingGray(timestamp2)

		venueDetails.value = data

		// console.log('data.reservationDateList', data.reservationDateList);
		// console.log('da', dateList.value);

	}

	// 时间置灰
	let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours()
	let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()
	const timeSettingGray = (dd) => {


		// 当前年月日
		const timestamp1 = new Date(dd);

		console.log(timestamp1, 'timestamp1');
		console.log(timestamp2, 'timestamp2');
		data.timelist.forEach((item, index) => {
			if (dd === timestamp2) {

				item.disabled = `${hours}:${minutes}`.localeCompare(item.time)
			} else {
				item.disabled = ''
			}
		})


		dateList.value.forEach((item, index) => {
			data.timelist.forEach((it, idx) => {

				if (item.time === it.time && item.date === dd) {

					it.disabled = 1
				}
			})
		})


	}


	const itemCurrent = ref()



	const itemValue = ref({
		prodId: '',
		addr: '',
		distanceLabel: '',
	})
	const shopList = ref({
		distanceLabel: ''
	})
	const addr = ref()
	onLoad((option) => {
		// venueDetails.value = JSON.parse(option.item)
		// addr.value = option.addr
		console.log('option:========= ', option);
		itemValue.value = JSON.parse(option.itemValue)
		shopList.value = JSON.parse(option.shopList)
		console.log('itemValue.value=========', itemValue.value);

		// 场地详情
		getProd()

		//获取手机系统的信息（在这主要是获取状态栏和胶囊的高度）
		let {
			statusBarHeight
		} = uni.getSystemInfoSync()
		data.barHeight = statusBarHeight
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		data.navHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2

	})

	// 返回上一页
	const back = () => {
		uni.navigateBack()
	}

	// 前往创建订单页面
	const goToCreaded = () => {
		if (itemCurrent.value === undefined)
			return uni.showToast({
				title: '请选择时间段',
				icon: 'none',
			})
		uni.navigateTo({
			url: `/subPackage/venue/submit?venueDetails=${JSON.stringify(venueDetails.value)}&itemValue=${JSON.stringify(itemValue.value)}&itemCurrent=${JSON.stringify(itemCurrent.value)}&dd=${data.value1.dd}&w=${data.value1.w}`
		})

	}

	// 点击时间
	const timeClick = (item, i) => {
		console.log(itemCurrent.value, 'itemCurrent.value')
		if (item.disabled === 1) return

		itemCurrent.value = item
		data.timeCurrent = i
		console.log('item,i', item, i);
	}

	const value = uni.getStorageSync('launchFlag');
</script>

<template>
	<view class="field-detail-page">
		<view class="navber" :style="{ 'height': data.navHeight + 'px', 'margin-top': data.barHeight + 'px' }">
			<u-icon class="back" color="#FFFFFF" name="arrow-left" @click="back"></u-icon>
			<text>场地详情</text>
		</view>
		<!-- 头部 -->
		<view class="head">
			<!-- 轮播 -->
			<swiper class="swiper-box" :current="data.swiperCurrent" circular :autoplay="false" :interval="3000"
				@change="e => data.swiperCurrent = e.detail.current">
				<swiper-item class="item" v-for="item in venueDetails.prodDetailPic" :key="item">
					<view>
						<image style="height: 520rpx; width: 750rpx;" :src="item" mode="scaleToFill" />
					</view>
				</swiper-item>
			</swiper>
			<!-- 控制 -->
			<view class="control-box">
				<view class="right">
					<text class="current">{{ data.swiperCurrent + 1 }}</text>
					<text class="num">{{ '/' + venueDetails.prodDetailPic.length }}</text>
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="content-box">
			<!-- 场地信息 -->
			<view class="info-box">
				<!-- 地址和距离 -->
				<view class="top">
					<view class="left">
						<image src="/static/images/icons/icon_shop.png" style="width: 32rpx; height: 32rpx;"
							mode="widthFit" />
						<text>{{ itemValue.shopName }}</text>
					</view>
					<view class="right">
						<image src="/static/images/icons/icon_address2.png" style="width: 32rpx; height: 32rpx;"
							mode="widthFit" />
						<text>{{shopList.distanceLabel}} </text>
					</view>
				</view>
				<!-- 名称 -->
				<view class="name">
					{{venueDetails.prodName}}
				</view>
				<!-- 标签和价格 -->
				<view class="bottom">
					<view class="tags">
						<view class="item">龙门架</view>
						<view class="item">卧推架</view>
						<view class="item">仰卧板</view>
					</view>
					<view class="price">
						<view class="current-price">
							<view class="num">
								<text>￥{{venueDetails.price}}</text>
							</view>
							<text>/次</text>
						</view>
						<view class="original-price">
							<text>{{venueDetails.origPrice}} /次</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 承诺 -->
			<view class="promise-box">
				<view class="item">
					<image src="/static/images/icons/promise_icon1.png" mode="scaleToFill" />
					<text>不满意包退</text>
				</view>
				<view class="item">
					<image src="/static/images/icons/promise_icon2.png" mode="scaleToFill" />
					<text>过期退</text>
				</view>
				<view class="item">
					<image src="/static/images/icons/promise_icon3.png" mode="scaleToFill" />
					<text>按次约</text>
				</view>
				<view class="item">
					<image src="/static/images/icons/promise_icon4.png" mode="scaleToFill" />
					<text>超优惠</text>
				</view>
			</view>
			<!-- 预约时间 -->
			<view class="appointment-time">
				<view class="title">
					<text>预约时间</text>
				</view>
				<!-- 日期选择器 -->
				<view class="date-box">
					<DateTabs :value.sync="data.value1" @change='onDateTabsChange'></DateTabs>
				</view>
				<!-- 时间选择器 -->
				<view class="time-box">
					<view class="title">
						<text>选择时间段</text>
					</view>
					<view class="list">
						<scroll-view class="scroll-box" scroll-x="true">
							<view v-for="(item, i) in data.timelist" :key="i" class="item"
								:class="item.disabled===1? 'disabled' :  data.timeCurrent == i ? 'active' : ''"
								@click="timeClick(item,i)">
								<view class="cnt">{{ item.time }}</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
			<!-- 配套设施列表 -->
			<view class="facilities-list">
				<view class="title">
					<text>配套设施</text>
				</view>
				<view class="list">
					<view class="item">
						<image src="/static/images/coach/facilities1.png" mode="scaleToFill" />
						<text>淋浴间</text>
					</view>
					<view class="item">
						<image src="/static/images/coach/facilities2.png" mode="scaleToFill" />
						<text>储物柜</text>
					</view>
					<view class="item">
						<image src="/static/images/coach/facilities3.png" mode="scaleToFill" />
						<text>停车场</text>
					</view>
					<view class="item">
						<image src="/static/images/coach/facilities4.png" mode="scaleToFill" />
						<text>饮用水</text>
					</view>
				</view>
			</view>
			<!-- 流程 -->
			<view class="process-box">
				<view class="title">
					<text>订单流程</text>
				</view>
				<view class="steps">
					<view class="item">
						<view class="num">1</view>
						<view class="text">预约成功</view>
					</view>
					<view class="item">
						<view class="num">2</view>
						<view class="text">前往门店</view>
					</view>
					<view class="item">
						<view class="num">3</view>
						<view class="text">前台签到</view>
					</view>
					<view class="item">
						<view class="num">4</view>
						<view class="text">成功入场</view>
					</view>
				</view>
				<view class="tips">
					<text style="color:#FF0000">*</text>
					<text>此场馆签到方式：</text>
					<text class="important">需提供二维码扫码使用</text>
				</view>
			</view>

		</view>
		<!-- 按钮 -->
		<view class="btns-box">
			<view class="price">
				<view class="num">
					<text>￥{{venueDetails.price}}</text>
				</view>
				<text>/次</text>
			</view>
			<view class="btn" @click="goToCreaded">
				<text>立即预约</text>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.field-detail-page {

		padding-bottom: 216rpx;
		background-color: #F6F6F6;
		min-height: 100vh;

		// 顶部导航栏
		& .navber {
			position: absolute;
			z-index: 99;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100vw;
			font-weight: 500;
			font-size: 32rpx;
			line-height: 32rpx;
			color: #FFFFFF;
			text-align: center;

			&::v-deep .u-icon {
				position: absolute;
				left: 24rpx;
				font-size: 40rpx;

			}
		}

		// 头部-轮播
		& .head {
			position: relative;

			& .swiper-box {
				height: 500rpx;
				text-align: center;

				& .item {
					height: 500rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: red;
					border-radius: 24rpx;
				}
			}

			& .control-box {
				position: absolute;
				bottom: 48rpx;
				display: flex;
				padding: 32rpx;
				align-items: center;
				justify-content: flex-end;
				width: 100%;



				& .right {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #8A8C92;
					line-height: 28rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;

					& .current {
						color: #fff;
					}
				}
			}

			// & .control-box {
			// 	position: absolute;
			// 	bottom: 24rpx;
			// 	right: 32rpx;
			// 	font-family: PingFang SC, PingFang SC;
			// 	font-weight: 400;
			// 	font-size: 24rpx;
			// 	color: #8A8C92;
			// 	line-height: 28rpx;
			// 	text-align: right;

			// 	& .current {
			// 		color: #fff;
			// 	}
			// }
		}

		& .content-box {
			position: relative;
			z-index: 2;
			margin: 0 32rpx;
			margin-top: -64rpx;

			// 场地信息
			& .info-box {
				padding: 28rpx 32rpx;
				background: #FFFFFF;
				border-radius: 24rpx;

				& .top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					& .left {
						display: flex;
						align-items: center;

						& text {
							margin-left: 4rpx;
							font-weight: 400;
							font-size: 20rpx;
							color: #838385;
						}
					}

					& .right {
						display: flex;
						align-items: center;

						& text {
							margin-left: 4rpx;
							font-weight: 400;
							font-size: 20rpx;
							color: #838385;
						}
					}
				}

				& .name {
					margin-top: 16rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #303133;
				}

				& .bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;

					& .tags {
						display: flex;
						align-items: center;

						& .item {
							margin-right: 10rpx;
							padding: 4rpx 12rpx;
							background: #F5F7F6;
							border-radius: 4rpx;
							font-weight: 400;
							font-size: 18rpx;
							color: #838385;
						}
					}

					& .price {
						display: flex;
						align-items: flex-end;

						& .current-price {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 20rpx;
							color: #838385;
							line-height: 23rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;

							& .num {
								display: inline-block;
								margin-right: 6rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 32rpx;
								line-height: 38rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								background: linear-gradient(180deg, #303133 0%, #21FF2B 100%);
								background-clip: text;
								-webkit-background-clip: text;
								-webkit-text-fill-color: transparent;
							}
						}

						& .original-price {
							position: relative;
							margin-left: 12rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 20rpx;
							color: #D9D9D9;
							text-align: left;
							font-style: normal;
							text-transform: none;

							& text::after {
								content: "";
								position: absolute;
								z-Index: 2;
								left: 0;
								top: 10rpx;
								width: 100%;
								height: 2rpx;
								background-color: #D9D9D9;
								transform: rotate(-10deg);
							}
						}
					}
				}
			}

			// 承诺
			& .promise-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;
				padding: 28rpx 4rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				& .item {
					position: relative;
					display: flex;
					align-items: center;
					padding: 0 28rpx;

					&:not(:last-child)::after {
						content: '';
						position: absolute;
						right: 0;
						top: 0;
						bottom: 0;
						margin: auto;
						width: 0rpx;
						height: 32rpx;
						border: 2rpx solid #D9D9D9;
						opacity: 0.4;
					}

					& image {
						width: 32rpx;
						height: 32rpx;
						font-size: 0;
					}

					& text {
						margin-left: 4rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #303133;
						line-height: 23rpx;
					}
				}
			}

			& .appointment-time {
				margin-top: 20rpx;
				padding: 28rpx 32rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				&>.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #303133;
					line-height: 38rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				& .date-box {
					margin-top: 46rpx;
				}

				& .time-box {
					margin-top: 44rpx;

					&>.title {
						font-weight: 500;
						font-size: 28rpx;
						color: #303133;
					}

					& .list {
						margin-top: 20rpx;

						& .scroll-box {
							white-space: nowrap;

							& .item {
								display: inline-block;
								margin-right: 12rpx;
								border-radius: 12rpx;
								padding: 2rpx;
								background: linear-gradient(45deg, #93FE9C, #89C695);
								overflow: hidden;

								&.active {
									background: linear-gradient(-30deg, #003A10 0%, #21FF2B 100%);
									color: #FFFFFF;

									& .cnt {
										color: #FFFFFF;
										background: transparent;
									}
								}

								&.disabled {
									opacity: 0.4;
									color: #303133;

									& .cnt {}
								}

								& .cnt {
									padding: 12rpx 24rpx;
									font-weight: 400;
									font-size: 24rpx;
									color: #303133;

									border-radius: 12rpx;
									background: #DFFFE8;
									// border: 2rpx solid;
									// border-image: linear-gradient(210deg, #93FE9C, #89C695) 2 2;
								}
							}
						}
					}
				}
			}

			// 配套设施列表
			.facilities-list {
				margin-top: 20rpx;
				padding: 28rpx 32rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				& .title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #303133;
					line-height: 38rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				& .list {
					margin-top: 20rpx;

					& .item {
						display: inline-block;
						margin-right: 40rpx;
						width: 76rpx;

						& image {
							width: 76rpx;
							height: 76rpx;
						}

						& text {
							margin-top: 4rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #000000;
							opacity: 0.3;
							line-height: 28rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}
					}
				}
			}

			// 流程
			.process-box {
				margin-top: 20rpx;
				padding: 28rpx 32rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				& .title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #303133;
					line-height: 38rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				// 流程
				& .steps {
					margin-top: 24rpx;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: space-between;

					&:after {
						content: '';
						position: absolute;
						display: block;
						top: 32rpx;
						z-index: 1;
						margin-left: 64rpx;
						width: 500rpx;
						height: 2rpx;
						background-color: #F4F4F4;
					}

					& .item {
						position: relative;
						z-index: 2;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						& .num {
							width: 68rpx;
							height: 68rpx;
							font-weight: 500;
							font-size: 24rpx;
							color: #303133;
							line-height: 68rpx;
							text-align: center;
							background: #F4F4F4;
							border-radius: 50%;
						}

						& .text {
							margin-top: 12rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #838385;
						}
					}
				}

				// 提示
				& .tips {
					margin-top: 32rpx;
					font-weight: 400;
					font-size: 20rpx;
					color: #838385;

					& .important {
						background: linear-gradient(180deg, #303133 0%, #21FF2B 100%);
						background-clip: text;
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
				}

			}

			// 评价
			& .evaluate-box {
				margin-top: 20rpx;
				padding: 28rpx 32rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				& .top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					& .title {
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						font-size: 32rpx;
					}

					& .more {
						display: flex;
						align-items: center;
						font-weight: 400;
						font-size: 24rpx;
						color: #838385;

						& text {
							margin-right: 4rpx;
						}
					}
				}

				& .list {
					margin-top: 32rpx;

					& .item {
						padding-top: 24rpx;

						&:first-child {
							padding-top: 0rpx;
						}

						&:not(:last-child):after {
							margin-top: 24rpx;
							content: '';
							display: block;
							border: 2rpx solid;
							opacity: 0.5;
							border-image: linear-gradient(270deg, rgba(217, 217, 217, 0), rgba(217, 217, 217, 1), rgba(217, 217, 217, 0)) 2 2;
						}

						& .head-box {
							display: flex;
							align-items: center;

							& .info {
								margin-left: 12rpx;

								& .name {
									display: flex;
									align-items: center;

									& text {
										margin-right: 14rpx;
										font-weight: 400;
										font-size: 28rpx;
										color: #303133;
									}
								}

								& .time {
									margin-top: 6rpx;
									font-weight: 400;
									font-size: 20rpx;
									color: #838385;
								}
							}
						}

						& .cnt {
							margin-top: 24rpx;
							font-weight: 400;
							font-size: 28rpx;
							color: #303133;
						}

						& .picList {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 16rpx;

							& .pic-item {
								border-radius: 8rpx;
								overflow: hidden;
							}
						}
					}
				}
			}
		}

		// 按钮
		& .btns-box {
			position: fixed;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			bottom: 0;
			left: 0;
			z-index: 9;
			padding: 0 36rpx;
			padding-top: 12rpx;
			width: 100vw;
			height: 172rpx;
			background: #FFFFFF;
			border: 1rpx solid #E9E9EB;

			& .price {
				margin-top: 16rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #838385;
				line-height: 23rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;

				& .num {
					display: inline-block;
					margin-right: 6rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 48rpx;
					line-height: 56rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					background: linear-gradient(180deg, #303133 0%, #21FF2B 100%);
					background-clip: text;
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}

			& .btn {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 88rpx;
				width: 428rpx;
				color: #FFFFFF;
				background: #303133;
				font-weight: 500;
				font-size: 32rpx;
				line-height: 38rpx;
				text-align: center;
				border-radius: 112rpx;

			}
		}
	}
</style>